<template>
  <div>
    <div class="bigtop">
      <div class="top" @click="$router.push({ path: '/search' })">
        <van-search v-model="value" placeholder="请输入搜索关键词" />
      </div>
      <div class="shezhi" @click="$router.push({ path: '/shezhi' })">
        <p>设置</p>
      </div>
    </div>
    <div class="conter">
      <van-tabs v-model="active">
        <van-tab title="历史">
          <!-- <li v-for="(iditem, index) in itemts" :key="index">{{ iditem.ckid }}</li> -->
          <!-- {{ this.itemts.ckid }} -->
          <LiShi v-for="(iditem, iditemindex) in itemts" :key="iditemindex" :iditem="iditem" ></LiShi>
        </van-tab>
        <van-tab style="background-color: #f5f5f5" title="收藏">
          <!-- {{ this.cookids.cid }} -->
          <GuanZhu
            v-for="(item, itemindex) in cookids"
            :key="itemindex"
            :item="item"
          ></GuanZhu>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import LiShi from "../zujian/LiShi.vue";
import GuanZhu from "../zujian/GuanZhu.vue";
import Vue from "vue";
import { Tab, Tabs } from "vant";
import { Search } from "vant";

Vue.use(Search);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  components: {
    LiShi,
    GuanZhu,
  },
  data() {
    return {
      active: 2,
      value: "",
      cookids: JSON.parse(window.localStorage.getItem("cookids")) || [],
      itemts: JSON.parse(window.localStorage.getItem("itemts")) || [],
    };
  },
};
</script>

<style lang="scss" scoped>
.bigtop {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  z-index: 99;
  background-color: #de4722;
  .van-search {
    width: 90vw;
    background-color: #de4722;
    .van-search__content--square {
      border-radius: 20rem;
    }
  }
  .shezhi {
    font-size: 16rem;
    display: flex;
    align-items: center;
  }
}
.conter {
  margin: 54rem 0;

  :deep(.van-tabs__wrap) {
    position: sticky;
    top: 54rem;
    left: 0;
  }
  .van-tabs__wrap {
    .van-tabs__nav {
      background-color: #f5f5f5;
    }
  }
}
</style>
